<template>
	<view>
		<uni-popup ref="reservationPoPup" height="200px" type="center" :animation="false">
			<view class="mypopup">
				<view class="mypopup__head">
					<image src="../../static/img/icon-clock.png"></image>
					<text>预约</text>
				</view>
				<view class="mypopup__body">
					<view class="ag-cellgroup">
						<view class="ag-cell">
							<view class="ag-cell__label">
								<image mode="widthFix" src="../../static/img/icon-user.png" />
							</view>
							<view class="ag-cell__value">
								<text>{{orderDetailData.ContactName}}</text>
							</view>
						</view>
						<view class="ag-cell">
							<view class="ag-cell__label">
								<image mode="widthFix" src="../../static/img/icon-phone.png" />
							</view>
							<view class="ag-cell__value">
								<text class="ag-color-primary">{{orderDetailData.ContactMobile}}</text>
								<!-- <text class="ag-color-primary"></text> -->
							</view>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-location.png" />
						</view>
						<view class="ag-cell__value">
							<text>{{orderDetailData.DisplayAdress}}</text>
						</view>
					</view>
					<view class="ag-divider"></view>
					<view class="wodetail__booktime">
						<AGInput icon="calender" readonly placeholder="预约上门时间" @openCalender="onOpenCalender" :value="reservationTime" />
						<button class="cu-btn primary" data-date="thisafternoon" @click="onDefaultDate">今天下午</button>
						<button class="cu-btn primary" data-date="tomorrowmorning" @click="onDefaultDate">明天上午</button>
						<button class="cu-btn primary" data-date="tomorrowafternoon" @click="onDefaultDate">明天下午</button>
					</view>
					<view class="ag-divider"></view>
					<picker mode="selector" :range="reservationReason" :value="reasonIndex" range-key="Name" @change="ChangeReason">
						<AGInput customStyle="margin-top:0px;" readonly dropdown placeholder="原因代码" :value="reservationReason[reasonIndex].Name" />
					</picker>
					<yu-datetime-picker ref="dateTimePicker" :startYear="startYear" :value="reservationTime" :isAll="true" :current="false"
					 @confirm="confirmCalendar">
					</yu-datetime-picker>
					<AGInput textarea placeholder="备注" @change="ChangeReservationRemark" />
					<view class="mypopup__footer">
						<button class="cu-btn lg primary" @click="onSubmitReservation">确定</button>
						<button class="cu-btn lg primary plain" @click="closePoPup">取消</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import utils from '@/common/utils'
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup';
	import AGInput from '../AGInput/index.vue'
	import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
	import constant from '@/common/constant'
	const graceChecker = require("../../common/graceChecker.js")
	export default {
		props: {
			orderDetailData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		components: {
			AGInput,
			uniPopup,
			yuDatetimePicker
		},
		data() {
			return {
				reservationTime: `${utils.formatDate(new Date(), "yyyy-MM-dd")} 10:00:00`,
				reservationRemark: '',
				reservationReason: {},
				reasonIndex: 0,
				startYear: new Date().getFullYear()
			}
		},
		mounted() {
			this.ReasonCodeListAsync(constant.WORDER_APPOINTMENT_CODE);
		},
		methods: {
			onDefaultDate(e) {

				let todayDate = new Date();
				let dateNowStr = utils.formatDate(todayDate, "yyyy-MM-dd");
				let hour=todayDate.getHours()+2;
				let nextDate = utils.addDate(dateNowStr, 1); //后一天
				let defaultDateStr = e.currentTarget.dataset.date;
				if (defaultDateStr === "thisafternoon") {
					this.reservationTime = `${dateNowStr} ${hour}:00:00`;
				} else if (defaultDateStr === "tomorrowmorning") {
					this.reservationTime = `${nextDate} 10:00:00`;
				} else if (defaultDateStr === "tomorrowafternoon") {
					this.reservationTime = `${nextDate} 14:00:00`;
				}
				this.$refs.dateTimePicker.showSetDate(this.reservationTime);
			},
			ChangeReason(e) {
				this.reasonIndex = e.detail.value;
				// this.$emit("changeReservationReason", {
				// 	ReasonCodeId: this.reservationReason[this.reasonIndex].ReasonCodeId
				// });
			},
			confirmCalendar(e) {
				var currentdate = new Date(e.selectRes.replace(/-/g,"/"));
				if (currentdate > new Date()) {
					this.reservationTime = e.selectRes;
				} else {
					uni.showToast({
						title: "预约时间需要大于当前时间",
						icon: "none"
					});
				}
				console.log(e.selectRes);
				// this.$emit("changeReservationTime", {
				// 	reservationTime: e.selectRes
				// });
			},
			ChangeReservationRemark(e) {
				this.reservationRemark = e;
				console.log(this.reservationRemark);
			},
			onOpenCalender(e) {
				this.$refs.dateTimePicker.show();
			},
			openPoPup() {

				this.$refs.reservationPoPup.open();


			},
			closePoPup() {
				this.$refs.reservationPoPup.close();
			},

			//预约提交
			onSubmitReservation() {
				// let ReservationData = {
				// 	reservationTime: this.reservationTime,
				// 	reservationRemark: this.reservationRemark,
				// 	reservationReason: this.reservationReason[this.reasonIndex].ReasonCodeId,
				// }
				var currentdate = new Date(this.reservationTime.replace(/-/g,"/"));
				if (currentdate > new Date()) {
					this.$emit("onSubmitReservation", {
						reservationRemark: this.reservationRemark,
						reservationTime: this.reservationTime,
						ReasonCodeId: this.reservationReason[this.reasonIndex].ReasonCodeId
					});
				}else{
					uni.showToast({
						title: "预约时间需要大于当前时间,请重新选择",
						icon: "none"
					});
				}
				
			},


			//绑定原因列表
			// async ReasonCodeListAsync(ReasonCodeType) {
			// 	let UserPhone = this.UserInfo.mobile;
			// 	let token = this.UserInfo.RetId
			// 	let result = await this.workorderdetailservice.ReasonCodeListAsync(UserPhone, ReasonCodeType, token);
			// 	console.log(result);
			// 	if (result.RetBool == true) {
			// 		let data = JSON.parse(result.RetObject);
			// 		this.reservationReason = data;
			// 	} else {
			// 		uni.showToast({
			// 			title: result.RetMsg,
			// 			icon: "none"
			// 		});
			// 	}
			// },

			ReasonCodeListAsync(ReasonCodeType) {
				let UserPhone = this.UserInfo.mobile;
				let token = this.UserInfo.RetId
				this.workorderdetailservice.ReasonCodeListAsync(UserPhone, ReasonCodeType, token).then(result => {
					console.log(result);
					if (result.RetBool == true) {
						let data = JSON.parse(result.RetObject);
						this.reservationReason = data;
					} else {
						uni.showToast({
							title: result.RetMsg,
							icon: "none"
						});
					}
				});

			},

		}
	}
</script>

<style lang="scss">

</style>
